<template>
	<view class="home">
		<custom-head-bar id="customHeadBar" :foldState='foldState'></custom-head-bar>
		<view class="wrapper">
			<view class="infomodel">
				<view class="left">免费配送
					<!-- {{vuexValue1}}
					<button @click="clickbtn">修改值</button> -->
				</view>

				<navigator url="/pages/order/order" class="right">
					<u-icon name="order" color="#576b95" size="24"></u-icon>
					我的订单
				</navigator>
			</view>
			<view class="scrollLayout">
				<view class="leftScroll">
					<scroll-view scroll-y class="sContent" scroll-with-animation :scroll-top='leftScrollValue'>
						<view v-for="(item,index) in dataList" :key="item.id" class="navItem" :class="index==navIndex?'active':''"
							@click="clickNav(index)">{{item.name}}</view>
						
					</scroll-view>
				</view>
				<view class="rightScroll">
					<navigator url="/pages/search/search" class="pro-search">
						<u-icon name="search" color="#576b95" size="22"></u-icon>
						搜索
					</navigator>
					<scroll-view scroll-y class="sContent" scroll-with-animation :scroll-top='rightScrollValue'
						@scroll="rightScrollEvt">
						<view class="product-view" v-for="(item,index) in dataList" :key="item.id">
							<u-sticky class="tt-sticky" offset-top="0">
								<view class="product-title">
								  {{item.name}}
								</view>
							</u-sticky>
							<view class="product-con">
								<view class="product-item" v-for="(proitem,index2) in item.children" :key="proitem.id">
									<product-item :proitem='proitem'></product-item>
								</view>
							</view>
						</view>
						<view class="product-view">
							
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="bot">
			<car-layout v-if="buyNum>0"></car-layout>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				title: 'Hello',
				navIndex: 0,
				leftScrollValue: 0,
				rightScrollValue: 0,
				lefttopArr: [],
				righttopArr: [],
				foldState: false,
				dataList: [{
					id: 1,
					name: "豆干制品",
					children: [{
						id: 11,
						name: "卫龙辣条",
						price: 10,
						before_price: 22,
						thumb: "https://mp-c422c6b7-799d-4ff5-9531-5051a0481131.cdn.bspapp.com/cloudstorage/83562e26-cfac-4cec-8f51-9ae6986942af.jpg",
						numvalue: 0
					}, {
						id: 12,
						name: "卫龙大面筋",
						price: 5,
						before_price: 12,
						thumb: "https://mp-c422c6b7-799d-4ff5-9531-5051a0481131.cdn.bspapp.com/cloudstorage/30569d48-bb94-40de-8d2b-a3be99d710cd.jpg",
						numvalue: 0
					}, {
						id: 13,
						name: "辣片",
						price: 5,
						before_price: 12,
						thumb: "https://mp-c422c6b7-799d-4ff5-9531-5051a0481131.cdn.bspapp.com/cloudstorage/30569d48-bb94-40de-8d2b-a3be99d710cd.jpg",
						numvalue: 0
					}, {
						id: 14,
						name: "豆干",
						price: 5,
						before_price: 12,
						thumb: "https://mp-c422c6b7-799d-4ff5-9531-5051a0481131.cdn.bspapp.com/cloudstorage/30569d48-bb94-40de-8d2b-a3be99d710cd.jpg",
						numvalue: 0
					}]
				}, {
					id: 2,
					name: "饼干糕点",
					children: [{
						id: 21,
						name: "丹麦曲奇",
						price: 25,
						before_price: 36,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/6758e11c-949b-48c5-ae69-ddad030c2f94.png",
						numvalue: 0
					},{
						id: 22,
						name: "丹麦曲奇",
						price: 25,
						before_price: 36,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/6758e11c-949b-48c5-ae69-ddad030c2f94.png",
						numvalue: 0
					},{
						id: 23,
						name: "丹麦曲奇",
						price: 25,
						before_price: 36,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/6758e11c-949b-48c5-ae69-ddad030c2f94.png",
						numvalue: 0
					},{
						id: 24,
						name: "丹麦曲奇",
						price: 25,
						before_price: 36,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/6758e11c-949b-48c5-ae69-ddad030c2f94.png",
						numvalue: 0
					}]
				}, {
					id: 3,
					name: "酒水饮料",
					children: [{
						id: 31,
						name: "韩国烧酒",
						price: 18,
						before_price: 29,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/b1a12bee-0602-4cb5-927d-b2b246700e89.jpeg",
						numvalue: 0
					},{
						id: 32,
						name: "韩国烧酒",
						price: 18,
						before_price: 29,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/b1a12bee-0602-4cb5-927d-b2b246700e89.jpeg",
						numvalue: 0
					},{
						id: 33,
						name: "韩国烧酒",
						price: 18,
						before_price: 29,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/b1a12bee-0602-4cb5-927d-b2b246700e89.jpeg",
						numvalue: 0
					},{
						id: 34,
						name: "韩国烧酒",
						price: 18,
						before_price: 29,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/b1a12bee-0602-4cb5-927d-b2b246700e89.jpeg",
						numvalue: 0
					},{
						id: 35,
						name: "韩国烧酒",
						price: 18,
						before_price: 29,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/b1a12bee-0602-4cb5-927d-b2b246700e89.jpeg",
						numvalue: 0
					},{
						id: 36,
						name: "韩国烧酒",
						price: 18,
						before_price: 29,
						thumb: "https://mp-3309c116-4743-47d6-9979-462d2edf878c.cdn.bspapp.com/cloudstorage/b1a12bee-0602-4cb5-927d-b2b246700e89.jpeg",
						numvalue: 0
					}]
				}]
			}
		},
		onLoad() {
			// !!!
			this.$nextTick(() => {
				this.getHeightArr()
			})

		},
		computed: {
			...mapGetters(['buyNum'])
		},
		methods: {
			// ...mapMutations(['setVuexHeight']),

			// clickbtn(){
			// 	this.setVuexHeight(55)
			// },
			// 点击导航
			clickNav(index) {
				this.navIndex = index;
				console.log(this.navIndex,index);
				// 防抖处理
				this.timeout = setTimeout(() => {
					this.leftScrollValue = this.lefttopArr[index]
					this.rightScrollValue = this.righttopArr[index]
				}, 100)
			},
			// 获取滚动条高度
			getHeightArr() {
				let selectorQuery = uni.createSelectorQuery();
				let customHeadBar;
				//获取自定义导航高度				
				selectorQuery.select("#customHeadBar").boundingClientRect(rect => {
					customHeadBar = rect.height;
				}).exec()
				// 左侧滚动到区域的节点组
				selectorQuery.selectAll(".navItem").boundingClientRect(rects => {
					this.lefttopArr = rects.map(item => item.top - customHeadBar - 40)
					// console.log(this.lefttopArr)
				}).exec();
				// 右侧滚动到区域的节点组
				selectorQuery.selectAll(".product-view").boundingClientRect(rects => {
					this.righttopArr = rects.map(item => item.top - customHeadBar - 40)
					// console.log(this.righttopArr)
				}).exec();
			},
			// 监听右侧滚动条的改变
			rightScrollEvt(e) {
				console.log(e);
				let scrollTop = Math.ceil(e.detail.scrollTop);
				console.log(scrollTop);
				console.log(this.righttopArr);
				let idx = this.righttopArr.findIndex((value, index, arr) => scrollTop >= value && scrollTop < arr[index +
					1])
				this.navIndex = idx;
				this.leftScrollValue = this.lefttopArr[idx];
				// console.log(idx);
				if (scrollTop < 300) {
					this.foldState = false;
				}
				if (scrollTop > 400) {
					this.foldState = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.wrapper {
			flex-grow: 1;
			background: $border-color-light;
			position: relative;
			z-index: 2;
			overflow: hidden;
			margin-top: -20rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.infomodel {
				color: $text-font-color1;
				position: relative;
				z-index: 10;
				@include flex-box-set(between, center);
				padding: 0 30rpx;
				height: 90rpx;
				border-bottom: 1px solid #ddd;
				font-size: 26rpx;

				.right {
					@include flex-box();
					color: $brand-theme-color-aux;
				}
			}

			.scrollLayout {
				height: calc(100% - 80rpx);
				@include flex-box();

				.leftScroll {
					height: 100%;
					width: 200rpx;
					border-right: 1px solid $border-color;
					background-color: $page-bg-color;

					.navItem {
						font-size: 28rpx;
						padding-left: 30rpx;
						line-height: 100rpx;
						color: $text-font-color1;
						position: relative;

						&.active {
							color: $text-font-color1;
							background: #fff;

							&:after {
								content: "";
								display: block;
								width: 6rpx;
								height: 30rpx;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
								background: $brand-theme-color;
							}
						}
					}
				}

				.rightScroll {
					height: 100%;
					flex-grow: 1;
					position: relative;
					padding: 0 30rpx;

					.pro-search {
						position: absolute;
						right: 30rpx;
						top: 0;
						height: 90rpx;
						font-size: 28rpx;
						color: $brand-theme-color-aux;
						@include flex-box-set(center, center);
						z-index: 3;
					}

					.product-view {
						.tt-sticky {
							top: 0 !important;
						}

						.product-title {
							line-height: 90rpx;
							background: #fff;
							font-size: 30rpx;
							font-weight: bold;
						}
					}
				}

				.sContent {
					height: 100%;
					z-index: 2;
					position: relative;
				}
			}
		}


	}
</style>